<template>
<div class="login-container">
    <div class="login-info">
        <div> <h1>标题</h1></div>
        <div class="desc">
            基于基于 Spring Cloud alibaba 、Spring Boot 、 OAuth2 的 RBAC 权限管理系统 
        </div>
        <div class="login-bg">
            <img src="@/assets/login.jpg" alt="">
        </div>
    </div>
    <div class="login-form">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="onLogin">
				<div class="login-title">登录</div>
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" :prefix-icon="User" placeholder="用户名称"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" :prefix-icon="Lock" show-password placeholder="用户密码"></el-input>
				</el-form-item>
				
				<el-form-item class="login-button">
					<el-button type="primary" @click="onLogin()">登录，我配置成功</el-button>
				</el-form-item>
			</el-form>
    
    </div>
</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { nanoid } from 'nanoid';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
const router = useRouter()
const loginFormRef: any = ref(null)

const loginForm = reactive({
	username: 'guest',
	password: '123456',
	captcha: '',

	grant_type:'password',
	uuid:nanoid()
});

const loginRules = ref({
	username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
	password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})

const onLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		// 用户登录
		store.userStore.getToken(loginForm).then(() => {
			router.push({ path: '/home' })
		})
        
	})
}


</script>

<style lang="scss" scoped>

.login-container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
}
.login-info{
    display: flex;
    flex-direction: column;
    width: 400px;
    flex: 0 1 auto;
}
.login-info h1{
    color: var(--el-color-primary);
}
.login-info desc{
    color: rgb(113, 115, 112);
    line-height: 32px;
    padding: 15x 0;
}
.login-bg img{
    width: 400px;
}


.login-form{
    display: flex;
    background-color: #fff;
    padding-left: 40px;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    border-radius: 6px;
	box-shadow: 1px 1px 8px #aaa6a6;
	box-sizing: border-box;
    
    :deep(.el-input){
        height: 45px;
		margin-top: 20px;
		.el-input__inner {
			padding: 10px 15px 10px 5px;
			height: 45px;
			line-height: 45px;
			color: #666;
			font-size: 16px;
		}

    }

}

.login-title {
	display: flex;
	justify-content: center;
	
	font-size: 24px;
	color: #444;
	letter-spacing: 4px;
}

.login-button {
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100%;
		height: 45px;
		font-size: 18px;
		letter-spacing: 8px;
	}
}


@media only screen and (max-width: 992px) {
	.login-info {
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	.login-container {
		background: #fff;
	}
	.login-info {
		display: none;
	}
	.login-form {
		flex: 0 1 auto;
		border-radius: 0;
		box-shadow: none;
	}
	.login-captcha {
		:deep(.el-input) {
			width: 150px;
		}
	}
}

</style>